<template>
    <div class="min-h-screen bg-gradient-to-br from-blue-900 to-indigo-800 flex items-center justify-center p-4">
      <div class="w-full max-w-md">
        <!-- 登录卡片 -->
        <div class="bg-white rounded-xl shadow-2xl overflow-hidden">
          <!-- 顶部装饰条 -->
          <div class="h-2 bg-gradient-to-r from-cyan-500 to-blue-600"></div>
          
          <!-- 登录表单 -->
          <div class="p-8">
            <div class="text-center mb-8">
              <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
              </div>
              <h1 class="text-2xl font-bold text-gray-800">计算机协会</h1>
              <p class="text-gray-600 mt-1">请输入您的账号信息</p>
            </div>
  
            <el-form :model="form" :rules="rules" ref="formRef">
              <el-form-item prop="username">
                <el-input 
                  v-model="form.username" 
                  placeholder="用户名/邮箱" 
                  size="large"
                  :prefix-icon="User"
                />
              </el-form-item>
              
              <el-form-item prop="password">
                <el-input 
                  v-model="form.password" 
                  type="password" 
                  placeholder="密码" 
                  show-password
                  size="large"
                  :prefix-icon="Lock"
                />
              </el-form-item>
              
              <div class="flex justify-between items-center mb-6">
                <el-checkbox v-model="form.remember">记住我</el-checkbox>
                <el-link type="primary" :underline="false">忘记密码?</el-link>
              </div>
              
              <el-button 
                type="primary" 
                size="large" 
                class="w-full" 
                @click="submitForm"
                :loading="loading"
              >
                登录
              </el-button>
            </el-form>
  
            <div class="mt-6 text-center text-sm">
              <span class="text-gray-600">还没有账号?</span>
              <el-link type="primary" class="ml-1" :underline="false">立即注册</el-link>
            </div>
          </div>
        </div>
  
        <!-- 版权信息 -->
        <div class="mt-6 text-center text-white text-opacity-80 text-sm">
          © 2023 计算机协会 · 保留所有权利
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import { User, Lock } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  
  const form = ref({
    username: '',
    password: '',
    remember: false
  })
  
  const rules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
    ]
  }
  
  const loading = ref(false)
  const formRef = ref()
  
  const submitForm = () => {
    formRef.value.validate((valid: boolean) => {
      if (valid) {
        loading.value = true
        // 模拟登录请求
        setTimeout(() => {
          loading.value = false
          ElMessage.success('登录成功')
          // 这里可以添加登录成功后的跳转逻辑
        }, 1500)
      }
    })
  }
  </script>
  
  <style scoped>
  /* 自定义输入框样式 */
  :deep(.el-input__wrapper) {
    @apply shadow-sm;
  }
  
  /* 按钮悬停效果 */
  :deep(.el-button--primary) {
    @apply transition-all duration-300;
  }
  :deep(.el-button--primary:hover) {
    @apply shadow-md shadow-blue-500/30;
  }
  </style>